<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1">
		</div>
	</body>
</html>
<style type="text/css">
	.box1{
		width: 200px;
		height: 200px;
		background-color: #0000FF;
		/* 对当前元素生效的关键帧名字 */
		animation-name: test ;
		/* 动画执行时间 */
		animation-duration: 2s ;
		/* 动画的延时 */
		animation-delay: 2s;
		
		animation-timing-function: linear;
		/* 执行次数 infinite无限执行*/
		animation-iteration-count:  infinite;
		/* 动画执行方向 normal默认值 reverse反方向 alternate-reverse重复执行动画时反向执行*/
		/* animation-direction: alternate-reverse; */
		/* 动画执行状态 running默认值 pause暂停*/
		animation-play-state: running;
		/* 动画填充模式 none默认值，动画执行完毕元素回到初始位置 fowards停止在结束位置 backwards延时等待事处于开始位置*/
		animation-fill-mode: forwards;
	}
	/* 动画和过度类似，都能实现动画效果，动画自动触发动态效果，过度需要某个属性发生变化时触发 */
	/* 动画效果需要首先设置关键帧 */
	@keyframes test{
		/* from表示动画开始 ,可以使用0%*/
		from{
			margin-left: 0;
		}
		/* to表示动画结束 ，可以使用100%*/
		to{
			margin-left: 600px;
		}
	}
</style>